<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/qwebchannel.js"></script>
    <style>
        html {
            background-color: #999999;
        }
    </style>
</head>
<body>
<button id="sendMessageToPython">sendMessageToPython</button>
<div>receiveMessageFromPython：</div>
<div id="receiveMessageFromPython"></div>
</body>
</html>
<script type="text/javascript">
    function output(message){
        var output = document.getElementById("receiveMessageFromPython");
        output.innerHTML = output.innerHTML + message + "\n";
    }

    window.onload = function () {
        new QWebChannel(qt.webChannelTransport, function (channel) {
            // 获得PyQt交互对象
            var interactObj = channel.objects.interactObj;
            document.getElementById("sendMessageToPython").onclick = function () {
                var msg = 'hello'
                output("Html send string to Python: " + msg);
                interactObj.jsPostMessage(msg);
            }
            // 监听python发布的消息
            interactObj.pyMessage.connect(function (msg) {
                output("Received string from Python: " + msg);
            });
        });
    }
</script>